<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/sx.css.css">
    <link rel="stylesheet" href="./css/shopping-cart.css">
    <script src="./api/axios.js"></script>
</head>

<body>
    <nav>
        <div class="contai">
            <ul>
                <li>
                    <span class="index" id="name">名字</span>
                    <span  class="index">手机逛淘宝</span>
                    <span>网页无障碍</span>
                </li>
                <li>
                    <span class="index">淘宝网首页</span>
                    <span class="index">我的淘宝</span>
                    <span class="index">购物车</span>
                    <span class="index">收藏夹</span>
                    <span class="index">商品分类&nbsp;免费开店</span>
                    <span>|</span>
                    <span class="index">千牛卖家中心</span>
                    <span class="index">联系客服</span>
                </li>
            </ul>
        </div>
    </nav>
    <header>
        <div class="contai">
            <img src="./img/logo4.png" alt="">
            <p>
                <span>宝贝</span>
                <input type="text">
                <i>搜索</i>
            </p>

        </div>
    </header>
    <main>
        <div class="box contai" id="bigBox">
            <div class="top">
                <h3>购物车（全新66）</h3>
                <p>
                    <span>已选商品（不含运费）</span>
                    <span id="allPriceel">0.00</span>
                    <span>结算</span>
                </p>
            </div>

            <div class="Nav">
                <ul>
                    <li>
                        <input type="checkbox" value="" id="checkAll">
                        <span>全选</span>
                    </li>
                    <li>商品信息</li>
                </ul>
                <ul>
                    <li>单价</li>
                    <li>数量</li>
                    <li>金额</li>
                    <li>操作</li>
                </ul>
            </div>

            <div class="minbox">
                <div class="shoppingCartlist">
                    <div>
                        <p>超值换购活动</p>
                        <p>满88</p>
                    </div>
                    <ul id="oUl">
                        <!-- <li>
                            <p>
                                <input type="checkbox">
                            </p>


                            <p>

                                <img src="./img/21.jpg" alt="">

                            </p>

                            <p>

                                RNW鼻贴祛黑头粉刺闭口神器黑头导出液清洁收缩毛孔10片正品rnw

                            </p>

                            <p>
                                购买规格：2件
                            </p>

                            <p>
                                ￥138.00
                            </p>

                            <p>
                                <input type="button" value="-">
                                <input type="text" value="1">
                                <input type="button" value="+">
                            </p>

                            <p>
                                ￥138.00
                            </p>

                            <p>
                                <span>移入收藏夹</span>
                                <span>删除</span>
                            </p>

                        </li> -->
                    </ul>
                </div>
            </div>


        </div>


    </main>
</body>
<script>
    // let uid = window.localStorage.getItem('uid') || 113699
    let uid =113699
    let oUl = document.getElementById('oUl')
    axios.get('http://jx.xuzhixiang.top/ap/api/cart-list.php', {
        params: {
            id: uid,
        }
    }).then(res => {
        let data = res.data.data;

        let scr = ''
        data.forEach(qu => {
            scr += `
            <li class='list_items'>
            <p>
                                <input type="checkbox" class='ck'>
                            </p>


                            <p>

                                <img src="${qu.pimg}" alt="">

                            </p>

                            <p>

                               ${qu.pname}

                            </p>

                            <p>
                                购买规格：2件
                            </p>

                            <p>
                                ${qu.pprice}
                            </p>

                            <p>
                                <input type="button" value="-" class='jian'>
                                <input type="text" value="${qu.pnum}" class='tex'>
                                <input type="button" value="+" class='jia'>
                            </p>

                            <p class='price'>
                                ${qu.pprice * qu.pnum}
                            </p>

                            <p>
                                <span>移入收藏夹</span>
                                <span class='sc'>删除</span>
                            </p>

                        </li>
            `
        });
        oUl.innerHTML = scr;


        let tex = document.querySelectorAll('.tex')
        let jia = document.querySelectorAll('.jia')
        let jian = document.querySelectorAll('.jian')
        let price = document.querySelectorAll('.price')
        let a = res.data.data
        function getTotalPrice() {
            let cks = document.querySelectorAll(".ck");
            let allPriceel = document.getElementById('allPriceel')
            let totalPrice = 0;
            for (let j = 0; j < cks.length; j++) {
                if (cks[j].checked) {
                    totalPrice += a[j].pnum * a[j].pprice;
                }
            }
            allPriceel.innerText = totalPrice + '元'
        }


        for (let i = 0; i < jia.length; i++) {
            jia[i].onclick = function (value) {
                a[i].pnum++
                price[i].innerText = a[i].pnum * a[i].pprice
                tex[i].value = a[i].pnum;
                changeNumner({
                        uid: uid,
                        pid: a[i].pid,
                        pnum: a[i].pnum
                    })
                getTotalPrice()
            }
        }
        for (let i = 0; i < jian.length; i++) {
            jian[i].onclick = function () {
                a[i].pnum--
                price[i].innerText = a[i].pnum * a[i].pprice
                tex[i].value = a[i].pnum
                if (tex[i].value < 1) {
                    tex[i].value = 1
                    a[i].pnum = 1
                }
                changeNumner({
                        uid: uid,
                        pid: a[i].pid,
                        pnum: a[i].pnum
                    })

                getTotalPrice()
            }
        }
        let sc = document.querySelectorAll('.sc')
        for (let i = 0; i < sc.length; i++) {
            sc[i].onclick = () => {
               
                axios.get('http://jx.xuzhixiang.top/ap/api/cart-delete.php', {
                    params: {
                        uid: uid,
                        pid: a[i].pid

                    }
                }).then(res => {
                    let olist = document.querySelectorAll('.list_items')
                    oUl.removeChild(olist[i])
                    getTotalPrice()



                }

                )

            }
        }
        this.checkAll = document.querySelector("#checkAll");

        this.cks = document.querySelectorAll(".ck");
        this.checkAll.onclick = () => {
            for (let i = 0; i < this.cks.length; i++) {
                this.cks[i].checked = this.checkAll.checked;
            }
            getTotalPrice();
        }

        for (let i = 0; i < this.cks.length; i++) {
            this.cks[i].onclick = () => {


                let count = 0;
                for (let j = 0; j < this.cks.length; j++) {
                    if (this.cks[j].checked) {
                        count++;
                    }
                }

                if (count == this.cks.length) {
                    this.checkAll.checked = true;
                } else {
                    this.checkAll.checked = false;
                }

                getTotalPrice();

            }
        }

    });


    function changeNumner(params){
        axios.get('http://jx.xuzhixiang.top/ap/api/cart-update-num.php', {
                    params
                }).then(res => {

                })
    }
    let index=document.querySelectorAll('.index')
    for(let i=0; i<index.length;i++){
         index[i].onclick=function(){
        location.href='index.html'
    }
    }
    let name=document.getElementById('name')
   let names=localStorage.getItem('username')
   if(names!=undefined){
      name.innerText=names
   }


</script>

</html>